<script setup>

import { reactive } from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

  const router = useRouter();
  const logout = () => {
    router.push('/Login')
  }

  const info=reactive({
    user:{}
  })

  info.user=JSON.parse(sessionStorage.getItem('user'))
  if(!info.user){
    ElMessage.error("访问不合法，请登录！")
    router.push('/Login')
  }
</script>

<template>
  <div class="common-layout" >
    <el-container style="height: 100vh">
      <el-header style="background-color: #d50909;height: 80px;display: flex">
        <!--文字信息-->
        <div style="width: 500px;color: white;font-size: 36px;font-family: 华文楷体;font-weight: bold;
        line-height: 80px">澳佳微人事管理系统</div>
        <!--空白-->
        <div style="flex: 1"></div>
        <!--登录信息-->
        <div v-if="info.user" style="width: 300px;color: white;line-height: 80px;text-align: right;margin-right: 30px">
          欢迎 {{info.user.username}} 登录, <a style="color:white;" href="javascript:void(0)" @click="logout()">退出</a>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px" style="border-right: 2px solid #ccc">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>职工管理</span>
              </template>
              <el-menu-item index="/Layout/Employee">职工信息登记</el-menu-item>
              <el-menu-item index="1-2">人事调动</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Management /></el-icon>
                <span>部门管理</span>
              </template>
              <el-menu-item index="/Layout/Department">部门信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户设置</span>
              </template>
              <el-menu-item index="/Layout/User">用户信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统设置</span>
            </template>
            <el-menu-item index="4-1">初始化信息</el-menu-item>
            <el-menu-item index="4-2">修改个人信息</el-menu-item>
          </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main style="">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>

</style>